<template>
	<view class="meeting-container">
		<view class="meeting-card">
			<view class="meeting-icon">
				<u-icon name="calendar-fill" color="rgba(255,255,255,.8)" size="56"></u-icon>
			</view>
			<view class="meeting-message">
				<h1>{{list.meetingname}}</h1>
				<view class="people">
					<p>主讲人：{{list.meetingpeople}}</p>
					<p>参与：{{list.meetingjionpnum}}人</p>
				</view>
				<p>培训地点：{{list.meetingaddress}}</p>
				<p>开始时间：{{list.meetingbegintime}}</p>
				<p>结束时间：{{list.meetingendtime}}</p>
			</view>
		</view>
		<view class="text">
			<p>培训主题</p>
			<view class="u-line-1">
				{{list.trainTheme}}
			</view>
		</view>
		<view class="meeting-images">
			<p>培训现场</p>
			<view class="images-box">
				
				<u-image width="210rpx" height="210rpx" class="m-images" :src="item.url" mode=""
					v-for="(item, index) in list.meetingimages" :key="index" @click="imgPreview(index)">{{item.url}}</u-image>
					
			</view>
		</view>
	</view>
</template>

<script>
	import resources from '@/libs/resources.js'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		getDictionaryDataSelector,
		getDataInterfaceRes
	} from '@/api/common'
	import request from '@/utils/request'
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				sortValue: '',
				searchForm: {
					meetingname: undefined,
					meetingpeople: undefined,
					meetingaddress: undefined,
					meetingjionpnum: undefined,
					meetingbeginday: undefined,
					meetingbegintime: undefined,
					meetingendtime: undefined,
				},
				downOption: {
					use: true,
					auto: false
				},
				upOption: {
					page: {
						num: 0,
						size: 20,
						time: null,
					},
					empty: {
						use: true,
						icon: resources.message.nodata,
						tip: "暂无数据",
						fixed: true,
						top: "300rpx",
						zIndex: 5,
					},
					textNoMore: '没有更多数据',
					toTop: {
						bottom: 250
					}
				},
				list: [{
					meetingname: "生产安全特种作业考试",
					meetingpeople: "贾大涛",
					meetingjionpnum: "23",
					meetingaddress: "会议大厅1",
					meetingbegintime: "2022-10-09 15:00:00",
					meetingendtime: "2022-10-09 16:00:00",
				}, ],
				meetingImages: [
					"/static/image/learnapp/video_fm@2x.png",
					
				],
				listQuery: {
					sort: 'desc',
					sidx: '',
					keyword: '',
					json: ''
				},
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}, ],
				sortOptions: [{
						label: '会议名称降序',
						sidx: 'meetingname',
						value: 'meetingnamedesc',
						sort: 'desc'
					},
					{
						label: '会议名称升序',
						sidx: 'meetingname',
						value: 'meetingnameasc',
						sort: 'asc'
					},
					{
						label: '主讲人降序',
						sidx: 'meetingpeople',
						value: 'meetingpeopledesc',
						sort: 'desc'
					},
					{
						label: '主讲人升序',
						sidx: 'meetingpeople',
						value: 'meetingpeopleasc',
						sort: 'asc'
					},
					{
						label: '会议地点降序',
						sidx: 'meetingaddress',
						value: 'meetingaddressdesc',
						sort: 'desc'
					},
					{
						label: '会议地点升序',
						sidx: 'meetingaddress',
						value: 'meetingaddressasc',
						sort: 'asc'
					},
					{
						label: '参会人数降序',
						sidx: 'meetingjionpnum',
						value: 'meetingjionpnumdesc',
						sort: 'desc'
					},
					{
						label: '参会人数升序',
						sidx: 'meetingjionpnum',
						value: 'meetingjionpnumasc',
						sort: 'asc'
					},
					{
						label: '会议日期降序',
						sidx: 'meetingbeginday',
						value: 'meetingbegindaydesc',
						sort: 'desc'
					},
					{
						label: '会议日期升序',
						sidx: 'meetingbeginday',
						value: 'meetingbegindayasc',
						sort: 'asc'
					},
					{
						label: '会议开始时间降序',
						sidx: 'meetingbegintime',
						value: 'meetingbegintimedesc',
						sort: 'desc'
					},
					{
						label: '会议开始时间升序',
						sidx: 'meetingbegintime',
						value: 'meetingbegintimeasc',
						sort: 'asc'
					},
					{
						label: '会议结束时间降序',
						sidx: 'meetingendtime',
						value: 'meetingendtimedesc',
						sort: 'desc'
					},
					{
						label: '会议结束时间升序',
						sidx: 'meetingendtime',
						value: 'meetingendtimeasc',
						sort: 'asc'
					},
				],
				menuId: '',
				listid: '',
				imgurl:'http://1.192.217.27:20000',
				imglist:[]
			}
		},
		onLoad(e) {
			this.listid = e.id
			this.menuId = e.menuId
			uni.$on('refresh', () => {
				this.list = [];
				this.mescroll.resetUpScroll();
			})
			this.dataAll()
			this.upCallback()
		},
		onUnload() {
			uni.$off('refresh')
		},
		methods: {
			imgPreview(index) {
				console.log(this.list.meetingimages);
				for(var a =0;a<this.list.meetingimages.length;a++){
					this.imglist.push(this.list.meetingimages[a].url)
					
				}
				// console.log(this.imglist);
				uni.previewImage({
					current: index,
					urls: this.imglist
				})
			},

			linkTo() {
				uni.navigateTo({
					url: '/pages/apply/training/training_details/index',
					fail: (err) => {
						this.$u.toast("暂无此页面")
					}
				})
			},

			dataAll() {},
			closeData(e) {
				if (e == 1) {
					// this.reset()
				}
			},
			upCallback(page) {
				//             for(let i in this.searchForm){
				// 	if(!this.searchForm[i]){
				// 		delete this.searchForm[i]
				// 	}
				// }

				request({
					url: '/api/example/Mt_safe_train/detail/' + this.listid,
					method: 'get',

				}).then(res => {
					console.log(res.data);
					this.list = res.data
					this.list.meetingbegintime = this.timestampToTime(this.list.meetingbegintime)
					this.list.meetingendtime = this.timestampToTime(this.list.meetingendtime)
					this.list.meetingimages=JSON.parse(this.list.meetingimages)
					for(let i =0;i<this.list.meetingimages.length;i++){
						this.list.meetingimages[i].url=this.imgurl+this.list.meetingimages[i].url
					} 
				
				}).catch(() => {
					console.log('x');
				})
			},
			timestampToTime(timestamp) {
				var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				 var Y = date.getFullYear() + '-';
				        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
				        var D = date.getDate() + ' ';
				        var h = (date.getHours() < 10 ? '0'+ date.getHours() : date.getHours()) + ':';
				        var m = (date.getMinutes() < 10 ? '0'+ date.getMinutes() : date.getMinutes()) + ':';
				       var s = (date.getSeconds() < 10 ? '0'+ date.getSeconds() : date.getSeconds()) ;
				  
				        return Y+M+D+h+m+s;
				


			},
			handleClick(index, index1) {
				const item = this.list[index]
				request({
					url: '/api/example/Mt_safe_train/' + item.id,
					method: 'delete'
				}).then(res => {
					uni.showToast({
						title: res.msg,
						complete: () => {
							this.$u.toast(res.msg)
							this.list.splice(index, 1)
							if (!this.list.length) this.mescroll.showEmpty()
						}
					})
				})
			},
			open(index) {
				this.list[index].show = true;
				this.list.map((val, idx) => {
					if (index != idx) this.list[idx].show = false;
				})
			},
			search() {
				if (this.isPreview == '1') return
				this.searchTimer && clearTimeout(this.searchTimer)
				this.searchTimer = setTimeout(() => {
					this.list = [];
					this.mescroll.resetUpScroll();
				}, 300)
			},
			goDetail(id, status) {
				let btnType = ''
				let btnList = []
				btnList.push('btn_edit')
				btnList.push('btn_detail')
				if (btnList.includes('btn_detail')) {
					btnType = "btn_detail"
				}
				if (btnList.includes('btn_edit')) {
					btnType = "btn_edit"
				}
				if (!btnType) return
				this.jumPage(id, status, btnType)
			},
			addPage() {
				this.jumPage()
			},
			jumPage(id, status, btnType) {
				if (!id && !status) btnType = 'btn_add'
				uni.navigateTo({
					url: id ? './form?menuId=' + this.menuId + '&jurisdictionType=' + btnType + '&id=' + id :
						'./form?menuId=' + this.menuId + '&jurisdictionType=' + btnType
				})
			},
			cellClick(item) {
				if (this.sortValue === item.value) return
				this.listQuery.sort = item.sort
				this.listQuery.sidx = item.sidx
				this.sortValue = item.value
				this.$refs.uDropdown.close();
				this.$nextTick(() => {
					this.list = [];
					this.mescroll.resetUpScroll();
				})
			},
			reset() {
				this.$refs.searchForm.resetFields()
			},
			closeDropdown() {
				this.$refs.uDropdown.close();
				this.$nextTick(() => {
					this.list = [];
					this.mescroll.resetUpScroll();
				})
			},
			dataList(data) {
				let _list = []
				for (let i = 0; i < data.list.length; i++) {
					let _data = data.list[i]
					_list.push(_data)
				}
				return _list;
			},
		},
	}
</script>

<style lang="scss">
	.text{
		width: 100%;

		background-color: #fff;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		padding: 20rpx;
		p {
			margin-bottom: 20rpx;
			font-size: 32rpx;
			color: #333333;
		}
	}
	page {
		background-color: #f0f2f6;
		height: 100%;
		/* #ifdef MP-ALIPAY */
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;

		/* #endif */
		.meeting-container {
			width: calc(100% - 40rpx);
			margin: 20rpx auto 0 auto;
			min-height: calc(100vh - 600rpx);

			.meeting-card {
				width: 100%;
				background-color: #fff;
				border-radius: 16rpx;
				padding: 30rpx;
				display: flex;
				margin-bottom: 20rpx;

				.meeting-icon {
					flex-shrink: 0;
					width: 100rpx;
					height: 100rpx;
					margin-right: 20rpx;
					background-color: #2585DD;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.meeting-message {
					h1 {
						font-size: 32rpx;
						color: #333;
						font-weight: bold;
					}

					.people {
						display: flex;
						align-items: center;

						p {
							font-size: 26rpx;
							color: #797F85;
							margin-top: 15rpx;

							&:last-child {
								margin-left: 20rpx;
							}
						}
					}

					&>p {
						font-size: 26rpx;
						color: #333;
						margin: 15rpx 0;
					}
				}
			}

			.meeting-images {
				width: 100%;
				background-color: #fff;
				border-radius: 16rpx;
				padding: 30rpx 0;

				p {
					margin-left: 20rpx;
					font-size: 32rpx;
					color: #333333;
				}

				.images-box {
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					align-content: flex-start;
					padding: 10rpx;

					.m-images {
						margin: 10rpx;
						border-radius: 10rpx;
						overflow: hidden;
					}
				}
			}
		}
	}
</style>
